<template>
  <div>
    <div style="margin-left: 30px">
      <p>完善信息</p>
      <p>审核通过即可成功入驻</p>
      <p>*填写正确的信息有助于快速通过审核</p>
    </div>
    <div style="margin-left: 30px">
      <a-form :layout="formLayout">
        <a-form-item
          label="您的真实姓名"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-input v-model="formData.name" />
        </a-form-item>

        <a-form-item
          label="您所在的医院"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-input v-model="formData.hospital" />
        </a-form-item>

        <a-form-item
          label="选择您的科室"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-select v-model="formData.department">
            <a-select-option value="title1">儿科</a-select-option>
            <a-select-option value="title2">妇科</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="选择您的职称"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-select v-model="formData.position">
            <a-select-option value="v1">主任</a-select-option>
            <a-select-option value="v2">护士</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
          <a-button
            type="primary"
            style="width: 30%; height: 50px"
            @click="handleSubmit"
          >
            下一步
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, computed } from "vue";

const router = useRouter();
const formData = ref({
  name: "",
  hospital: "",
  department: "title1", // Default value
  position: "v1", // Default value
});

const formLayout = ref("horizontal");

const handleSubmit = () => {
  // Convert formData to an array
  const formArray = [
    { label: "姓名", value: formData.value.name },
    { label: "医院", value: formData.value.hospital },
    { label: "科室", value: formData.value.department },
    { label: "职称", value: formData.value.position },
  ];
  console.log(formArray); // Print formArray for debugging

  // Optionally redirect to another page
  router.push("/Emailregistration");
};

const formItemLayout = computed(() => {
  return formLayout.value === "horizontal"
    ? {
        labelCol: { span: 6 }, // Adjusted for spacing
        wrapperCol: { span: 14 },
      }
    : {};
});

const buttonItemLayout = computed(() => {
  return formLayout.value === "horizontal"
    ? {
        wrapperCol: { span: 14, offset: 6 }, // Adjusted for spacing
      }
    : {};
});

// Define methods
function handleFormLayoutChange(e) {
  formLayout.value = e.target.value;
}
</script>

<style lang="scss">

</style>
